{% extends 'home.html' %}
    <!--author:gxj-->
    <!--date:2018/11-->
{% block styles %}
    <style>
        .fa-5{
            font-size: 1.2em;
        }
        .mybtnstyle{
            margin: 20px 0;
        }
        .btn-default,btn-default{
            float: right;
        }
    </style>
{% endblock %}

{% block message %}
<!--{{ block.super }}-->
    <div>
        <div >
            <a href="#" class="btn btn-primary mybtnstyle" onclick="selectall()">全选</a>
            <a href="#" class="btn btn-primary mybtnstyle" onclick="reverse()">返选</a>
            <a href="#"  class="btn btn-danger mybtnstyle">批量删除</a>
            <a href="#" class="btn btn-primary mybtnstyle" id="addbtn">添加学生</a>
        </div>
        <div>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>班级</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="content">
                    {% for student in studentList %}
                        <tr nid="{{ student.id }}">
                            <td><input type="checkbox"></td>
                            <td style="display: none" na="id">{{ student.id }}</td>
                            <td na="sno">{{ student.sno }}</td>
                            <td na="username">{{ student.name }}</td>
                            <td na="age">{{ student.age }}</td>
                            <td na="sex">{{ student.sex }}</td>
                            <td na="classId" cid="{{ student.classId }}">{{ student.classname }}</td>
                            <td>
                                <a class="fa fa-pencil-square-o fa-5 editrow"></a>
                                &nbsp;<span class="fa-5">丨</span>&nbsp;<a class="fa fa-times fa-5 delrow"></a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModalLabel">添加学生</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form_table">
                        <div class="form-group">
                            <label for="sno" class="col-sm-2 control-label">学号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="sno" name="sno" placeholder="请输入学号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" name="username" placeholder="请输入学生姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <label  class="radio-inline">
                                        <input type="radio" name="sex" value="男"> 男
                                    </label>
                                    <label  class="radio-inline">
                                        <input type="radio" name="sex" value="女"> 女
                                    </label>
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">班级</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="classId">
                                      <option>请选择班级</option>
                                    {% for class in classList %}
                                        <option value="{{ class.classId }}">{{ class.classname }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <span id="errormessage" style="color:red"></span>
                    <button type="button" class="btn btn-primary" id="savebtn">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除学生信息？</h4>
                </div>
                <div class="modal-body">
                    <div style="color: red">信息删除后将无法恢复、请谨慎操作！</div>
                    <div style="display: none"><input type="text" id="delNid"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="delconfirmb">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="updateModalLabel">编辑学生信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="edit_table">
                        <div class="form-group" style="display: none">
                            <label for="sno" class="col-sm-2 control-label">id</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="id" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sno" class="col-sm-2 control-label">学号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="sno">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="username" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="age">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label  class="radio-inline">
                                    <input type="radio" name="sex" value="男"> 男
                                </label>
                                <label  class="radio-inline">
                                    <input type="radio" name="sex" value="女"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">班级</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="classId">
                                    <!--<option>请选择班级</option>-->
                                    {% for class in classList %}
                                    <option value="{{ class.classId }}">{{ class.classname }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <span class="errorcode" style="color:red"></span>
                    <button type="button" class="btn btn-primary" id="editsave">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>




    <script src="/statics/js/jquery-3.3.1.min.js"></script>
    <script src="/statics/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script>

        $(function () {
            bindfvent();
            bindsave();
            binddel();
            binddelete();
            bindedit();
            bindeditsave();
            bindpage();
        });
        function bindedit() {
            $("#content").on('click',".editrow",function () {
                $("#editModal").modal('show')
                $(this).parent().prevAll().each(function () {
                    var n=$(this).attr('na')
                    var v=$(this).text()
                    if(n=='classId'){
                        var c_id = $(this).attr('cid')
                        $("#editModal select[name='classId']").val(c_id)
                    }else if(n=='sex'){
                        if(v=='男'){
                            $("#editModal :radio[value='男']").attr('checked','true')
                        }else {
                            $("#editModal :radio[value='女']").attr('checked','true')
                        }
                    }else {
                        $("#editModal input[name='"+ n+"']").val(v)
                    }

                })

            })

        }
        function bindeditsave() {
            $("#editModal").on('click','#editsave',function () {
                data=$('#edit_table').serializeArray();
                console.log(data)
                var params = {};
                for(var j=0;j<data.length;j++){
                    var item = data[j];
                    if(item.name=='age'){
                        params[item.name] = Number(item.value)
                    }
                    else {
                        params[item.name] = item.value
                    }
                }
                console.log('params---->',   params)
                $.ajax({
                    url: "/app02/updateStudent/",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify(params),
                    headers: {'Content-Type': 'application/json'},
                    success:function (arg) {
                        var date =JSON.parse(arg)
                        if (date.code==200){
                            window.location.reload()
                        }else {
                            $('.errorcode').text(date.code)
                        }
                    }
                })

//                $.post('/app02/updateStudent/',{"data":JSON.stringify(params)},function (arg) {
//                    var date =JSON.parse(arg)
//                    if (date.code==200){
//                        window.location.reload()
//                    }else {
//                        $('.errorcode').text(date.code)
//                    }
//                })
            })
        }

        function binddel() {
//            委托方式绑定
            $("#content").on('click',".delrow" ,function () {
                $("#delModal").modal("show")
                var rowid = $(this).parent().parent().attr("nid")
//                console.log(rowid)
                $("#delNid").val(rowid)
            })
//            $(".delrow").click(function () {
//                $("#delModal").modal("show")
//                var rowid = $(this).parent().parent().attr("nid")
////                console.log(rowid)
//                $("#delNid").val(rowid)
//
//            })
        };

        function binddelete() {
//            委托绑定
//            $("#delModal").on('click',"#delconfirmb",function () {
//            })
            $("#delconfirmb").click(function () {
                var rowid=$("#delNid").val()
                console.log(rowid)
                $.ajax({
                    url:"/app02/delStudent/",
                    method:"POST",
                    contentType:'application/json',
                    data: JSON.stringify({"nid":rowid}),
                    success:function (arg) {
                        console.log(arg);
                        var dict = $.parseJSON( arg )
                        if(dict.status){
                            window.location.reload()
                        }
                        else{
                            $('#errormessage').text(dict.message);
                        }
                    }
                })
            })
        };

        function bindfvent() {
            $("#addbtn").click(function () {
                $("#addModal").modal("show")
            })
        };

        function bindsave(){
            $("#savebtn").click(function () {
                var postdata = {};
                data = $("#form_table").serializeArray();
                for(var i=0;i<data.length;i++){
                    if(data[i].name=="age"){
                        postdata[data[i].name] = Number(data[i].value);
                    }
                    else{
                        postdata[data[i].name] = data[i].value;
                    }
                }
                $.ajax({
                    url: "/app02/addStudent/",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify(postdata),
                    headers: {'Content-Type': 'application/json'},

                    success: function (arg) {
                        var dict = $.parseJSON( arg )
//                        console.log(dict);
                        if(dict.status){
                            window.location.reload()
                        }
                        else{
                           $('#errormessage').text(dict.message);
                        }

                    }

                })
            })
            };

        function selectall() {
            $(":checkbox").each(function () {
                $(this).prop("checked",true)
            })
        };

        function reverse() {
            $(":checkbox").each(function () {
                    $(this).prop('checked',false)
            })
        };
        function bindpage() {

            $('.page').onclick(function () {
                var current_page = $(this).text();
                var pagesize =10;
                var pageNum = 7
                $.post('/app02/student/',{"current_page":current_page,"pagesize":pagesize,'pageNum':pageNum},
                function(arg) {
                    window.location.reload()
                })
            })
        }
    </script>

{% include "test.html" %}

{% endblock %}
<div>
    {% include "./include/pages.html" %}
</div>
